<template>
  <div class="monaco-container"
       @click="change">
    <div ref="container"
         class="monaco-editor"></div>
  </div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
  props: {
    // 编辑器中呈现的内容
    codes: {
      type: String,
      default: ''
      
    },
    readOnly: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 主要配置
    editorOptions: {
      type: Object,
      default: function () {
        return {
          selectOnLineNumbers: true,
          roundedSelection: false,
          readOnly: this.readOnly, // 只读
          cursorStyle: 'line', // 光标样式
          automaticLayout: false, // 自动布局
          glyphMargin: true, // 字形边缘
          useTabStops: false,
          fontSize: 28, // 字体大小
          autoIndent: false // 自动布局
        }
      }
    }
  },
  data () {
    return {}
  },
  watch: {
    codes: {
      handler (val) {
        this.monacoEditor.setValue(this.codes)
      }
    }
  },
  mounted () {
    this.monacoEditor = monaco.editor.create(this.$refs.container, {
      value: this.codes, // 见props
      language: 'JavaScript',
      theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
      editorOptions: this.editorOptions // 同codes
    })
  },
  methods: {
    change () {
      this.monacoEditor.onDidChangeModelContent((event) => {
        let changeContent = this.monacoEditor.getValue()
        this.$emit('update', changeContent)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.monaco-container {
  height: 100%;
  width: 100%;
}
.monaco-editor {
  height: 100%;
  width: 100%;
}
</style>
